<template>
	<comRoot>
		<template #page>
			<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
				:src="`${commonConfigs.domainFrontFileLink}/files/images/page-bg.png`" class="bg" />
			
			<image class="absolute" 
				style="width: 100%;height: 556rpx;top: 0;left: 0;"
				v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
				:src="`${commonConfigs.domainFrontFileLink}/files/images/welfareHouse/free-coupon-banner.png`" />
			
			<comDetailNavigateBack />

			<view class="tabbar-box relative">
				<view class="detail-tab-btns flex margin-auto" :style="{ position: 'sticky1', left: 0, top: 0, 'z-index': 1000, background1: 'rgba(0, 0, 0, 0.6)' }">
					<view class="detail-tab-btn-txt text-nowrap relative flex-all-center font-hanserif-bold"
						:class="currentTabType === item.type ? 'active' : ''" v-for="(item, index) in tabAreaList" :key="index" @click="setTabAreaFun(item)">
						<image class="bg"
							v-if="commonConfigs && commonConfigs.domainFrontFileLink"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/welfareHouse/${currentTabType === item.type ? 'tab-active' : 'tab'}.png`"
							mode=""
						></image>
						<text class="relative font-hanserif-regular">{{ item.name }}</text>
					</view>
				</view>
				
				<view class="relative flex font-hanserif-bold">
					<view v-for="(item, index) in tabList" :key="index" class="tabbar-item" v-if="commonConfigs && commonConfigs.domainFrontFileLink"
						:style="{
							'background-size': '32rpx 8rpx',
							'background-image': tabIndex !== index
									? ''
									: `url(${commonConfigs.domainFrontFileLink}/files/images/welfareHouse/tab-coupon-no.png)`
						}"
						:class="tabIndex === index ? 'active' : ''" @click="setTabIndexFun(index)">
						{{ item.name }}
					</view>
					
					<view class="tip-content flex-end flex-align-items-end absolute" @click="setClickRuleFun">
						<image 
							:src="`${commonConfigs.domainFrontFileLink}/files/images/welfareHouse/rule-icon-img.png`"
							class="tip-icon relative" />
					</view>
				</view>
				
			</view>

			<scroll-view scroll-y 
				:style="{ 
					width: '100%',
					height: 'calc(100vh - ' + commonNavHeight + ' - 360rpx - 220rpx)',
				}" 
					@scrolltolower="scrolltolower">
				<view v-if="resLists && resLists.length">
					<comWelfareList :resLists="resLists" @gooDetailPage="gooDetailPage" />
					<comLoadMore :loading="loading" :showLoadendTxt="showLoadendTxt" class="loadmore-txt"></comLoadMore>
				</view>
				<comEmptyData v-else></comEmptyData>
			</scroll-view>

			<view class="oper-btn-content flex-justify-content-center fixed font-hanserif-bold">
				<image
					:src="`${commonConfigs.domainFrontFileLink}/files/images/welfareHouse/join-now-bottom-bg.png`"
					class="bg" />
				<view class="oper-btn relative" v-if="commonConfigs && commonConfigs.domainFrontFileLink" style="color: #6C2AFE;" :style="{ 'background-image': `url(${commonConfigs.domainFrontFileLink}/files/images/welfareHouse/footer-coupon-btn1.png)` }" 
					@click="gooCouponDetailFun">我的优惠券</view>
				<view class="oper-btn relative" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :style="{ 'background-image': `url(${commonConfigs.domainFrontFileLink}/files/images/welfareHouse/footer-coupon-btn.png)` }" 
					@click="gooRecordDetailFun">中奖记录</view>
			</view>

			<comRuleUppop
				ruleName="活动规则"
				v-model="isShowRule"
				:isAllowedClickMaskClose="true">
				<template>
					<view v-html="ruleContent"></view>
				</template>
			</comRuleUppop>
			
		</template>
	</comRoot>
</template>

<script>
	import { getContentHomeApi, getWelfareHouseIndexApi } from '@/setupproject/INTERFACE';
	import { setNavigateFunTo } from '@/setupproject/TOOLS_FUN.js'; // 页面跳转
	import pager from '@/inmixed/paging.mixin.js';
	import store from '@/store';
	
	export default {
		name: 'welfareHousePage',
		mixins: [pager],
		data() {
			return {
				loading: false,
				isShowRule: false,
				ruleContent: '',
				currentTabType: 0,
				tabAreaList: [
					{ name: 'Roll房', type: 0 },
					{ name: '每日福利', type: 3 },
					{ name: '每周福利', type: 2 },
					{ name: '每月福利', type: 4 },
				],
				tabIndex: 0,
				tabList: [
					{
						id: 1,
						name: '进行中',
					},
					{
						id: 2,
						name: '已结束',
					}
				],
			};
		},
		computed: {
			commonOnline() {
				return store.getters.commonOnline;
			},
			showLoadendTxt() {
				return this.isShowPageLoadedTxt && !this.loading && this.resLists.length ? true : false;
			},
			commonNavHeight() {
				return store.getters.commonNavHeight + 'px';
			},
			commonConfigs() {
				return store.getters.commonConfigs || {};
			},
		},
		watch: {
			tabIndex() {
				this.resLists = [];

				/* paging.mixin.js Methods */
				this.pagingInitFun();
				this.resListsGetFun();
			}
		},
		methods: {
			async setTabAreaFun(item) {
				if(this.currentTabType === item.type) return;
				
				if(item) {
					this.currentTabType = item.type;
					this.tabIndex = 0;
				}
				
				this.pagingInitFun();
				this.resListsGetFun();
			},
			
			// 规则弹窗
			setClickRuleFun() {
				this.isShowRule = true;
				this.ruleContentGetFun();
			},
			
			// 我的优惠券
			async gooCouponDetailFun() {
				// #ifdef APP-PLUS
				// 支付前验证是否已登录
				if (await this.$store.dispatch('SHOW_LOGIN_APP_GET_FUN')) return;
				// #endif
			
				setNavigateFunTo('secondary/couponInfoPage/couponInfoPage');
			},
			
			async ruleContentGetFun() {
				let type;
				
				if (this.commonOnline) {
					type = 30;
				}else{
					type = 29;
				}
			
				const { data, code } = await getContentHomeApi({
					type
				})
			
				if (code !== 200) return;
				this.ruleContent = data.content;
			},
			
			async gooDetailPage(item) {
				// #ifdef APP-PLUS
				// 支付前验证是否已登录
				if (await this.$store.dispatch('SHOW_LOGIN_APP_GET_FUN')) return;
				// #endif

				const pramas = {
					id: item.id,
					type: item.type
				};
				setNavigateFunTo('secondary/joinHousePage/joinHousePage', pramas);
			},
			
			/* 需要固定为listsGetFun: 以配合 paging.mixin.js */
			async listsGetFun() {
				this.loading = true;
				
				const { data, code } = await getWelfareHouseIndexApi({ 
					type: this.tabIndex + 1, 
					page: this.pageInfoObj.page,
					tab_type: this.currentTabType,
					is_new: 1,
				});
				
				this.loading = false;
				
				if (code !== 200) return false;
				
				data.rows.forEach((item) => {
					item['status'] = this.tabIndex + 1;
				});
				
				data.resLists = data.rows;
				data.count = data.total;
				return data;
			},
			
			setTabIndexFun(index) {
				this.tabIndex = index;
			},
			
			async gooRecordDetailFun() {
				// #ifdef APP-PLUS
				// 支付前验证是否已登录
				if (await this.$store.dispatch('SHOW_LOGIN_APP_GET_FUN')) return;
				// #endif
				
				setNavigateFunTo('secondary/awardRecordPage/awardRecordPage');
			},
			
		}
	};
</script>

<style lang="scss" scoped>
	.tabbar-box {
		width: 100%;
		margin-bottom: 20rpx;
		margin-top: 230rpx;
		padding: 0 22rpx;
		
		.detail-tab-btns {
			padding: 8rpx 0rpx 32rpx 0rpx;
			overflow-x: auto;
			margin-top: 12rpx;
			
			.detail-tab-btn-txt {
				width: 160rpx;
				height: 62rpx;
				// padding-left: 26rpx;
				margin-right: 20rpx;
				font-size: 28rpx;
				color: #FFFF;
				flex: 0 0 auto;
				
				&.active {
					color: #FFF;
					font-weight: bold;
				}
			}
		}
		
		.tabbar-item {
			color: #FFF;
			font-size: 26rpx;
			margin-right: 18rpx;
			width: 196rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			
			&.active {
				color: #FFF;
				font-weight: bold;
				background-repeat: no-repeat;
				background-position: 80rpx 44rpx;
			}
		}
		
		.tip-content {
			height: 50rpx;
			color: #ffffff;
			font-size: 24rpx;
			right: 0rpx;
			.tip-icon {
				width: 112rpx;
				height: 24rpx;
				margin-right: 14rpx;
				top: -12rpx;
			}
		}
	}

	.oper-btn-content {
		font-size: 32rpx;
		color: #ffffff;
		width: 100%;
		height: 172rpx;
		padding-top: 30rpx;
		left: 0;
		bottom: 0rpx;
		font-weight: bold;
		.oper-btn {
			margin: 0 18rpx;
			background-size: 100% 100%;
			width: 291rpx;
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;
		}
	}
</style>
